<template>
  <el-header>
    <el-menu
        style="margin-left: 0;margin-right: 0"
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true">
      <el-row>
        <el-col :span="4"><h1 align="center">影院后台管理界面</h1></el-col>
        <el-col :span="2"><el-menu-item index="/usermanage" align="center">用户列表</el-menu-item></el-col>
        <el-col :span="2"><el-menu-item index="/moviemanage" align="center">影片管理</el-menu-item></el-col>
        <el-col :span="2"><el-menu-item index="/comment" align="center">统计分析</el-menu-item></el-col>
        <el-col :span="2"><el-menu-item index="/hall" align="center">影厅管理</el-menu-item></el-col>
        <el-col :span="2"><el-menu-item index="/timeline" align="center">档期管理</el-menu-item></el-col>
        <el-col :span="2"><el-menu-item index="/daily" align="center">日常经营管理</el-menu-item></el-col>
        <el-col :span="4"><b>&nbsp</b></el-col>
        <el-col :span="2"><el-menu-item index="7">{{ adminID }}</el-menu-item></el-col>
        <el-col :span="2"><el-menu-item index="8" @click="logout();$router.push('/')">退出</el-menu-item></el-col>
      </el-row>
    </el-menu>
  </el-header>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      adminID: localStorage.getItem('adminId'),
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout(){
      localStorage.clear();
    }
  }
}
</script>

<style scoped>

</style>